<template>
	<view class="common-title">

		<view class="name">
			<slot name="name"></slot>
		</view>

		<view class="custom">
			<slot name="custom"></slot>
		</view>

	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.common-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		margin-bottom: 24rpx; // 增加底部间距，提升呼吸感
		position: relative;

		// 主标题样式优化
		.name {
			font-size: 42rpx; // 稍大一点更清晰
			font-weight: 600;
			color: #1a1a1a;
			letter-spacing: 1rpx;
			position: relative;
			padding-left: 20rpx;

			// 添加左侧主题色竖条，增强视觉引导
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 32rpx;
				background-color: $brand-theme-color; // 使用主题色变量
				border-radius: 3rpx;
			}
		}

		// 自定义区域（如日期、更多等）
		.custom {
			font-size: 28rpx;
			color: #666;
			display: flex;
			align-items: center;
			min-width: 120rpx;
			justify-content: flex-end;

			// 如果内部有按钮、图标等，保持良好间距
			navigator,
			text,
			view {
				line-height: 1;
			}
		}

		// 可选：添加轻微下边框，增强模块分隔感（可注释）
		&::after {
			content: '';
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: -12rpx;
			height: 1rpx;
			background: linear-gradient(to right, transparent, #e5e5e5, transparent);
		}
	}
</style>